<template>
    <cover-view class="tab-bar">
        <!-- 首页 -->
        <cover-view class="tab-bar-item">
            <cover-view class="tab-bar-box" @tap="goIndex" v-if="address == 0">
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/shouye-xuanzhong2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-pitch">首页</cover-view>
            </cover-view>
            <cover-view class="tab-bar-box" @tap="goIndex" v-else>
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/shouye2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-nopitch">首页</cover-view>
            </cover-view>
        </cover-view>
        <!-- 分类 -->
        <cover-view class="tab-bar-item">
            <cover-view class="tab-bar-box" @tap="goClassify" v-if="address == 1">
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/fenlei-xuanzhong2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-pitch">分类</cover-view>
            </cover-view>
            <cover-view class="tab-bar-box" @tap="goClassify" v-else>
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/fenlei2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-nopitch">分类</cover-view>
            </cover-view>
        </cover-view>
        <!-- 购物车 -->
        <cover-view class="tab-bar-item">
            <cover-view class="tab-bar-box" @tap="goShoppingCart" v-if="address == 2">
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/gouwuche-xuanzhong2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-pitch">购物车</cover-view>
            </cover-view>
            <cover-view class="tab-bar-box" @tap="goShoppingCart" v-else>
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/gouwuche2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-nopitch">购物车</cover-view>
            </cover-view>
        </cover-view>
        <!-- 我的 -->
        <cover-view class="tab-bar-item">
            <cover-view class="tab-bar-box" @tap="goMy" v-if="address == 3">
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/wode-xuanzhong2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-pitch">我的</cover-view>
            </cover-view>
            <cover-view class="tab-bar-box" @tap="goMy" v-else>
                <cover-view class="tab-bar-img">
                    <cover-image :src="img_base_url + '/wode2.png'"></cover-image>
                </cover-view>
                <cover-view class="tab-bar-text-nopitch">我的</cover-view>
            </cover-view>
        </cover-view>
    </cover-view>
</template>

<script>
import { config } from '../../common/utils/congfig'
export default {
    props: ["address"],
    data() {
        return {
            img_base_url: config.img_base_url
        }
    },
    methods: {
        goIndex() {
            uni.switchTab({
                url: '/pages/index/index'
            })
        },
        goClassify() {
            uni.switchTab({
                url: '/pages/classify/classify'
            })
        },
        goShoppingCart() {
            uni.switchTab({
                url: '/pages/shoppingCart/shoppingCart'
            })
        },
        goMy() {
            uni.switchTab({
                url: '/pages/my/my'
            })
        }
    }
}
</script>

<style>
    .tab-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        background: #FFFFFF;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .tab-bar-item {
        flex: 1;
    }
    .tab-bar-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 16rpx;
    }
    .tab-bar-img {
        width: 41rpx;
        height: 40rpx;
    }
    .tab-bar-text-pitch {
        color: #24C79C;
        font-size: 22rpx;
        font-weight: 500;
        padding-top: 8rpx;
    }
    .tab-bar-text-nopitch {
        color: #333333;
        font-size: 22rpx;
        font-weight: 500;
        padding-top: 8rpx;
    }
</style>